<template>
  <div class="release_box">
    <div class="head">
      <p class="title">提示：点击发布人头像可直接私信，并可查看联系方式</p>
    </div>
    <div class="city" @click="changeCityPop">
      接单到：
      <p>
        <span>{{ cityMsg.name ? cityMsg.name : "请选择" }}</span
        ><u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
      </p>
    </div>
    <u--textarea
      cursorSpacing="80"
      :showConfirmBar="false"
      v-model="message"
      placeholder="注意⚠️接单请写具体城市！"
    ></u--textarea>
    <div class="photo">
      <div class="img" v-for="(item, index) in imgList" :key="index">
        <img :src="item" alt="" />
        <p class="close" @click="closeImg(index)">
          <u-icon name="trash" color="#fff" size="18"></u-icon>
        </p>
      </div>

      <div class="add" @click="changeImg" v-if="imgList.length < 3">
        <div class="mr" style="margin-right: 0">
          <img src="/static/photo.png" alt="" />
          <p>添加照片</p>
        </div>
        <!-- <p class="photo_num">{{imgList.length}} / 3</p> -->
      </div>
    </div>

    <div class="anniu_box">
      <u-button
        @click="sendSubmit"
        :disabled="isDisable"
        loadingMode="circle"
        :loading="isDisable"
        loadingText="发送中..."
        type="primary"
        text="发送"
      >
      </u-button>
      <div class="tips">
        <p class="text">
          本账号当前还可发布 <span>{{ notUsedCount }}</span> 条接单信息
        </p>
        <p class="an" @click="toTaocan">去增加/转赠</p>
      </div>
    </div>

    <!-- 选择接单群 -->
    <city-picker
      :isRefresh1="isRefresh1"
      :show="isCityShow"
      @closeCity="closeCity"
      @confirm="changeCity"
    ></city-picker>
  </div>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
import Config from "@/config/index.js"
import { Debounce } from "@/utils/utils.js"
export default {
  options: {
    styleIsolation: "shared",
  },
  props: {
    isRefresh: {
      type: Number,
      default: 0,
    },
    notUsedCount: {
      type: Number,
    },
  },
  watch: {
    isRefresh: {
      handler(n, o) {
        if (n) {
          console.log("刷新了")
          this.cityMsg = {}
          this.message = ""
          this.imgList = []
        }
      },
    },
  },
  data() {
    return {
      isCityShow: false,
      cityMsg: {},
      message: "",
      imgList: [],
      isDisable: false, // 提交
      isRefresh1: 0,
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.userName,
      userId: (state) => state.user.userId,
      token: (state) => state.user.token,
    }),
  },
  methods: {
    // 选择城市弹窗
    changeCityPop() {
      this.isCityShow = true
      this.isRefresh1 = 1
    },

    // 发送消息
    sendSubmit: Debounce(async function () {
      if (!this.cityMsg.id) {
        this.$toast("请选择接单群！")
        return
      }
      if (!this.message) {
        this.$toast("请输入内容！")
        return
      }
      let data = {
        message: this.message,
        memberUserId: this.userId,
        memberUserName: this.userName,
        createDate: Date.now(),
        type: 1,
        pictureList: this.imgList,
        messageLength: this.message.length,
        sendGroupUserId: this.cityMsg.id,
        sendGroupUserName: this.cityMsg.name,
      }
      this.isDisable = true
      uni.showLoading({ title: "发送中..." })
      api.user.add_news(data).then((res) => {
        if (res.code == 200) {
          uni.hideLoading()
          this.isDisable = false
          this.$emit("close", true)
          uni.showModal({
            title: "温馨提示",
            content: "发送成功",
            showCancel: false,
            confirmText: "确认",
            success: (res) => {},
          })
        } else {
          uni.hideLoading()
          this.isDisable = false
          this.$toast(res.msg)
        }
      })
    }, 300),

    // 关闭发送弹窗
    close() {
      this.$emit("close", false)
    },

    // 选择图片
    changeImg() {
      if (this.imgList.length >= 5) {
        this.$toast("最多上传3张！")
        return
      }
      let arr = []
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          uni.showLoading({ title: "上传中..." })
          console.log(res)
          uni.uploadFile({
            url: `${Config.apiUpload}`,
            name: "file",
            method: "POST",
            filePath: res.tempFilePaths[0],
            header: {
              Authorization: `Bearer ${this.token}`,
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              let returnData = JSON.parse(res.data)
              arr.push(returnData.data)
              this.imgList = this.imgList.concat(arr)
              console.log(this.imgList)
              uni.hideLoading()
              this.$toast("上传成功！")
            },
            fail: (err) => {
              uni.hideLoading()
              this.$toast("上传失败，请重新上传！")
            },
          })
        },
      })
    },

    closeImg(index) {
      let arr = []
      arr = this.imgList
      arr.splice(index, 1)
      this.imgList = []
      this.imgList = arr
    },

    // 确定接单群
    changeCity(e) {
      console.log(e)
      this.cityMsg = e
      this.isCityShow = false
    },

    // 关闭接单群弹窗
    closeCity() {
      this.isCityShow = false
      this.isRefresh1 = 0
    },

    // 跳转套餐
    toTaocan() {
      uni.navigateTo({
        url: "/pages/taocan/index",
      })
    },
  },
  mounted() {},
  onLoad() {},
  onShow() {},
}
</script>

<style lang="scss" scoped>
@mixin content-flex($pitch) {
  display: flex;
  align-items: center;
  justify-content: $pitch;
}
.release_box {
  border-radius: 20rpx 20rpx 0px 0px;
  background: #f7f7f7;
  .head {
    padding: 20rpx 30rpx 50rpx 30rpx;
    border-radius: 20rpx 20rpx 0px 0px;
    @include content-flex(space-between);
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #23ac39;
    }
  }
  .city {
    margin: 0 30rpx;
    font-size: 30rpx;
    color: #333;
    @include content-flex("");
    p {
      color: #999999;
      @include content-flex("");
      span {
        margin-right: 10rpx;
      }
    }
  }
  /deep/ .u-textarea {
    height: 167px;
    background: #fff;
    padding: 24rpx;
    font-size: 28rpx;
    flex: inherit;
    border: none;
    -webkit-appearance: none;
    color: #000;
    margin: 20rpx 30rpx 0 30rpx;
    textarea {
      height: 100% !important;
    }
  }
  .photo {
    margin: 24rpx 28rpx 10rpx 28rpx;
    display: flex;
    flex-wrap: wrap;
    .add {
      .photo_num {
        width: 220rpx;
        font-size: 26rpx;
        color: #999999;
        text-align: center;
      }
    }
    .mr {
      width: 220rpx;
      height: 220rpx;
      border-radius: 12rpx;
      background: #ffffff;
      margin: 0 16rpx 16rpx 0;
      flex-direction: column;
      @include content-flex(center);
      &:nth-child(3n) {
        margin-right: 0;
      }
      img {
        width: 64rpx;
        height: 64rpx;
        margin-bottom: 4rpx;
      }
      p {
        font-size: 24rpx;
        color: #999999;
      }
    }
    .img {
      @extend .mr;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
      .close {
        width: 100%;
        height: 50rpx;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 12rpx;
        border-bottom-right-radius: 12rpx;
        @include content-flex("center");
        /deep/ .u-icon--right {
          margin: 0 auto;
        }
      }
    }
  }

  .anniu_box {
    margin: 0 28rpx;
    text-align: center;
    /deep/ .u-button {
      height: 96rpx;
      line-height: 96rpx;
      border-radius: 100rpx;
      background: #23ac39;
      font-size: 32rpx;
      text-align: center;
      font-weight: 500;
      color: #fff;
      border: none;
    }
    .tips {
      @include content-flex(center);
      margin: 26rpx 0;
      .text {
        font-size: 28rpx;
        color: #333333;
        span {
          color: #ff4441;
        }
      }
      .an {
        width: 210rpx;
        height: 62rpx;
        line-height: 62rpx;
        border-radius: 100rpx;
        background: #23ac39;
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
        margin-left: 12rpx;
      }
    }
  }
}
</style>
